import React, { useEffect, useState } from "react";
import classess from "./Search.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";

function Search(props) {
  const [keyWord, setKeyWord] = useState("");

  // 在Effect的回调函数中，可以指定一个函数作为返回值
  // 这个函数可以称其为清理函数，它会在下次Effect执行功前调用
  // 可以在这个函数中，做一些工作来清除上次Effect执行所带来的的影响
  useEffect(() => {
    // 加入防抖功能
    let timer = setTimeout(() => {
      console.log("searchEffect执行了");
      props.filterMealsData(keyWord);
    }, 1000);
    return () => {
      clearTimeout(timer)
    }
  }, [keyWord]);

  // 输入框change事件   现在是非受控组件
  const inputChangeHandler = (e) => {
    setKeyWord(e.target.value.trim());
  };

  return (
    <div className={classess.search}>
      <span className={classess.searchIcon}>
        <FontAwesomeIcon icon={faMagnifyingGlass} />
      </span>
      <input
        type="text"
        placeholder="快来搜索。。。"
        value={keyWord}
        onChange={inputChangeHandler}
      />
    </div>
  );
}

export default Search;
